<template>
  <span class="btn" @click="onTwoThree">
    <span class="two-three" :class="{'active':!twoThree }">二维</span>
    <span> / </span>
    <span class="two-three" :class="{'active':twoThree}">三维</span>
  </span>
</template>

<script>
export default {
    name: 'TwoThree',
    computed: {
        twoThree() {
            return this.$store.getters.twoThree
        }
    },
    methods: {
        onTwoThree() {
            this.$store.dispatch('twoThree', !this.twoThree)
        }
    }
}
</script>

<style lang="scss" scoped>
    .two-three{
        color: #CCCCCC;
        &.active{
            color: #FFF;
        }
    }

</style>
